<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ftp-helper</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style>
      .row {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
      }

      .row .input-group {
        padding: 3px;
      }

      .row .input-group .input-group-row {
        display: flex;
        align-items: center;
      }

      .row .input-group input {
        flex: 1;
        margin: 3px;
        padding: 3px;
      }

      .log-wrapper {
        height: 50vh;
        overflow: auto;
        padding: 3px;
      }

      .log {
        font-size: 12px;
        padding: 3px;
      }

      .log.success {
        color: green;
      }

      .log.error {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="row" v-for="(item, index) in list" :key="index">
        <input v-model="item.checked" type="checkbox" />

        <div class="input-group">
          <div class="input-group-row">
            <input v-model="item.localRoot" placeholder="本地目录" />
            →
            <input v-model="item.remoteRoot" placeholder="服务器目录" />
          </div>
          <div class="input-group-row">
            <input v-model="item.host" placeholder="主机" />
            <input v-model="item.port" placeholder="端口" />
            <input v-model="item.user" placeholder="用户" />
            <input v-model="item.password" type="password" placeholder="密码" />
          </div>
        </div>
        <button v-if="list.length > 1" @click="deleteRow(index)">删除</button>
      </div>

      <button @click="deploy" :disabled="disabled">
        {{disabled? '部署中...' : '一键部署' }}
      </button>
      <button @click="addRow">添加</button>
      <button @click="log = []">清除日志</button>

      <div class="log-wrapper">
        <div
          class="log"
          :class="{success: item.indexOf('成功') !== -1, error: item.indexOf('错误') !== -1}"
          v-for="(item, index) in log"
          :key="index"
        >
          {{item}}
        </div>
      </div>
    </div>
    <script>
      const { ipcRenderer } = require("electron");
      new Vue({
        el: "#app",
        data: {
          disabled: false,
          list: JSON.parse(localStorage.getItem("deploy")) || [
            { checked: true },
          ],
          log: [],
        },
        watch: {
          list() {
            localStorage.setItem("deploy", JSON.stringify(this.list));
          },
        },
        created() {
          ipcRenderer.on("log", (event, arg) => {
            if (arg === "done") {
              this.disabled = false;
            } else {
              this.log.push(arg);
            }

            var scrollTarget = document.querySelector(".log-wrapper");
            scrollTarget.scrollTop = scrollTarget.scrollHeight;
          });
        },
        methods: {
          deploy() {
            const list = this.list.filter((e) => e.checked);
            var r = confirm(`确认要进行这${list.length}个部署任务？`);
            if (!r) return;
            this.disabled = true;
            ipcRenderer.send("deploy", list);
          },
          addRow() {
            const newRow = {
              ...this.list[this.list.length - 1],
              checked: true,
            };
            this.list.push(newRow);
          },
          deleteRow(index) {
            this.list.splice(index, 1);
          },
        },
      });
    </script>
  </body>
</html>
